<template>
    <div @click.self="closeMask" class="x-unit" :style="{height:`${deviceH}px`}">
        <div class="unit-ctx" :style="{'background-image':`url(${modelBg})`}">
            <div class="ctx-title">安防设施</div>
            <div class="ctx-info">
                <div class="info-type">
                    <div class="type-title">单位总数</div>
                    <div class="type-pie">
                        <x-safe-pie v-if="isShowPie" id="safepie" :data="CameraTypeEchartsData"/>
                    </div>
                </div>
                <div class="info-table">
                    <div class="table-rs">
                        <div class="table-header">
                            <div class="header-select">
                                <x-select :name="deviceType || '类型'" @selectItem="selectType" :listItem="typeList"/>
                            </div>
                            <div class="header-select">
                                <x-select :name="deviceState || '状态'" @selectItem="selectState" :listItem="stateList" />
                            </div>

                            <div @click="searchEvent" class="header-btn">搜索</div>
                        </div>
                        <ul class="table-list">
                            <li class="list-item">
                                <div class="item-name">设施名称</div>
                                <div class="item-type">设施类型</div>
                                <div class="item-location">安装位置</div>
                                <div class="item-state">状态</div>
                            </li>
                            <li v-for="item in CameraPageEchartsData" :key="item.id" class="list-item">
                                <div class="item-name">{{item.deviceName}}</div>
                                <div class="item-type">{{item.deviceModel}}</div>
                                <div class="item-location">{{item.address}}</div>
                                <div class="item-state">{{item.deviceState}}</div>
                            </li>
                        </ul>
                    </div>
                    <div v-if="allpage>0" class="table-footer">
                        <x-page @watchCurrentChange="currentChange" :currentPage="pageNum" :page-size="5" :allpage="allpage" :total-num="false"/>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
import {GetCamerTotleAndType,GetCamerInfoForPage} from '@/api/peopleApi';
import XSafePie from '@/components/xsafepie'
import XPage from '@/components/xpage'
import XSelect from '@/components/xselect'
export default {
    name:"xunitmodel",
    props:{
        id:{
            type:String,
            default:""
        },
        code:{
            type:String,
            default:""
        }
    },
    computed: {

    },
    data(){
        return{
            modelBg:require('@/assets/images/modelBg.png'),
            isShowPie:false,
            deviceH:0,
            name:"",
            peopleType:"",
            state:"",
            pageSize:12,
            pageNum:1,
            deviceState:"",
            deviceType:"",
            CameraTypeEchartsData:[],
            CameraPageEchartsData:[],
            total:0,
            allpage:0,
            typeList:[{
                enumName:"全部",
                value:''
            },{
                enumName:"人脸门禁",
                value:''
            },{
                enumName:"人脸摄像头",
                value:''
            }],
            stateList:[{
                enumName:"全部"
            },{
                enumName:"正常"
            },{
                enumName:"异常"
            },{
                enumName:"未知"
            }]
        }
    },
    components:{
        XSafePie,
        XPage,
        XSelect
    },
    beforeMount(){
       let h = document.documentElement.clientHeight || document.body.clientHeight;
        this.deviceH = h
    },
    mounted(){
        this.GetCameraData()
    },
    methods:{
        async GetCameraData(){
            try {
                let camerquery = {
                    code:this.code,
                    id:this.id
                }
                let pagequery={
                    code:this.code,
                    id:this.id,
                    deviceType:this.deviceType,
                    deviceState:this.deviceState,
                    pageNum:this.pageNum,
                    pageSize:this.pageSize
                }
                this.CameraTypeEchartsData = await GetCamerTotleAndType(camerquery)
                const res = await GetCamerInfoForPage(pagequery)
                this.isShowPie = true
                this.total = res.data.total
                this.CameraPageEchartsData = res.data.list
                this.allpage = Math.ceil(this.total/this.pageSize)
            } catch (error) {
                this.$message({
                    type:"error",
                    message:error
                })
            }
        },
        closeMask(){
            this.$emit("closeMask")
        },
        //分页
        currentChange(n){
            this.pageNum = n;
            this.GetCameraData()
        },
        //选择类型
        selectType(name){
            this.deviceType = name
        },
        //选择状态
        selectState(name){
            this.deviceState = name
        },
        //搜索
        searchEvent(){
            this.GetCameraData()
        }
    }
}
</script>
<style lang="less" scoped>
.x-unit{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.8);
    z-index: 1000;
    .unit-ctx{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 1177px;
        height: 800px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        padding: 10px 30px;
        box-sizing: border-box;
        .ctx-title{
            width: 100%;
            padding-top: 35px;
            box-sizing: border-box;
            font-family: PingFangSC-Medium;
            font-size: 24px;
            color: #E9E9E9;
            letter-spacing: 4.8px;
            text-align: center;
            box-sizing: border-box;
        }
        .ctx-info{
            width: 100%;

            height: 748px;
            padding-top: 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            .info-type{
                flex: 1;
                .type-title{
                    width: 100%;
                    font-family: PingFangSC-Medium;
                    font-size: 18px;
                    color: #69D3DA;
                    letter-spacing: 0;
                    text-align: left;
                }
                .type-pie{
                    width: 100%;
                    height: 300px;
                }

            }
            .info-table{
                flex: 3;
                height: 659px;
                padding-left: 40px;
                box-sizing: border-box;
                .table-rs{
                    width: 100%;
                    height: 562px;
                    overflow-y: auto;
                    .table-header{
                        width: 100%;
                        height: 36px;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        position: relative;
                        .header-item{
                            width: 186px;
                            height: 100%;
                            border: none;
                            outline: none;
                            background: #06121D;
                            border: 1px solid rgba(62,178,215,0.00);
                            border-radius: 4px;
                            font-size: 14px;
                            color: #fff;
                            padding:0 14px;
                            box-sizing: border-box;
                            .input{
                                font-size: 14px;
                                color: #fff;
                                width: 100%;
                                height: 100%;
                                border: none;
                                outline: none;
                                background: transparent;
                            }
                        }
                        .header-select{
                            width: 186px;
                            height: 100%;
                            margin-right: 20px;
                         }
                        .header-btn{
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            right: 0;
                            width: 66px;
                            height: 100%;
                            background: #72EDF5;
                            border-radius: 4px;
                            text-align: center;
                            line-height: 36px;
                            font-family: PingFangSC-Regular;
                            font-size: 14px;
                            color: #000000;
                        }
                    }
                    .table-list{
                        width: 100%;
                        list-style: none;
                        padding: 0;
                        margin-top: 15px;
                        .list-item{
                            padding: 0;
                            margin: 0;
                            list-style: none;
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            height: 36px;
                            &:nth-of-type(2n+1){
                                background: #06121D;

                            }
                            &:nth-of-type(2n){
                                background: transparent;
                            }
                            .item-name{
                                width: 222px;
                                padding-left: 33px;
                                box-sizing: border-box;
                                height: 100%;
                                font-family: PingFangSC-Regular;
                                font-size: 14px;
                                color: #FFFFFF;
                                line-height: 36px;
                                text-align: left;
                            }
                            .item-type{
                                width: 170px;
                                padding-left: 33px;
                                box-sizing: border-box;
                                height: 100%;
                                font-family: PingFangSC-Regular;
                                font-size: 14px;
                                color: #FFFFFF;
                                line-height: 36px;
                                text-align: left;
                            }
                            .item-location{
                                width: 250px;
                                padding-left: 33px;
                                box-sizing: border-box;
                                height: 100%;
                                font-family: PingFangSC-Regular;
                                font-size: 14px;
                                color: #FFFFFF;
                                line-height: 36px;
                                text-align: left;
                            }
                            .item-state{
                                width: 145px;
                                padding-left: 33px;
                                box-sizing: border-box;
                                height: 100%;
                                font-family: PingFangSC-Regular;
                                font-size: 14px;
                                color: #FFFFFF;
                                line-height: 36px;
                                text-align: left;
                            }
                        }
                    }
                }
                .table-footer{
                    width: 100%;
                    padding-top: 60px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: flex-end;
                }
            }
        }
    }
}
</style>
